<template>
  <div id="app">
    <!-- 变量表达式 -->
    <p>你喜欢的颜色是{{ msg }}</p>
    <!-- 属性表达式 -->
    <p>你的名字是{{ username }}</p>
    <p>{{ obj.age }}</p>
    <p>年龄是{{ obj.age }}</p>
    <!-- 方法调用表达式 -->
    <!-- msg是个字符串，toUpperCase是字符串的方法 -->
    <p>{{ msg.toUpperCase() }}</p>
    <!-- 三元表达式 -->
    <p>{{ (obj.age = "18" ? "已成年" : "未成年") }}</p>
  </div>
</template>

<script>
export default {
  name: "App1",
  // 插值表达式使用的变量放在data函数的返回对象里
  data() {
    return {
      msg: "purple",
      username: "white",
      obj: {
        name: "white",
        age: 18,
      },
    };
  },
};
</script>

<style>
div {
  color: purple;
  text-align: center;
}
</style>
